<!DOCTYPE html>
<html lang="en">

<head>
    <title>保养列表</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="../css/global.css" rel="stylesheet">
    <link rel="stylesheet" href="../css/iconfont/iconfont.css">
    <link rel="stylesheet" href="../css/patrolPage.css">
    <script src="../js/vue.js"></script>
    <script src="../js/axios.js"></script>
    <link rel="stylesheet" href="../css/nutui/dist/nutui.css">
    <script src="../css/nutui/dist/nutui.js"></script>
</head>

<body>
    <div id="app">
        <div class="app_header">
            <div class="app_headerLeft" @click="back">
                <span class="iconfont icon-arrow-left-bold"></span>
            </div>
            <div class="app_headerTitle">保养中心</div>
        </div>
        <div class="app_tabs">
            <div :class="[tabs == 1?'app_tabsActive':'']" @click="tabs = 1">待保养 <span v-if="tabs == 1">5</span></div>
            <div :class="[tabs == 2?'app_tabsActive':'']" @click="tabs = 2">已保养</div>
            <div :class="[tabs == 3?'app_tabsActive':'']" @click="tabs = 3">漏保养</div>
        </div>
        <div class="app_main">
            <div class="app_mainItem" v-for="(item,index) in 10" @click="gomaintainDetail">
                <div class="app_mainItem_left">
                    <div class="title">ALCW智能型无负压供水</div>
                    <div class="tabs">
                        <div>一季度设备保养计划</div>
                    </div>
                    <div class="tips">起止时间：2022/07/04  08:30至2022/07/04  08:30</div>
                    <div class="tips">地址：长沙市芙蓉区南苑小区1栋负一二层</div>
                    <!-- <div class="tips" v-if="tabs == 2">完成时间：2022/07/04 12:00</div> -->
                </div>
                <div class="app_mainItem_right">
                    <div v-if="tabs == 1" class="colorBlue">去完成</div>
                    <div v-if="tabs == 2" class="maintainListState1">
                        <div class="state">已完成</div>
                        <div class="tips">2022/07/04  08:30</div>
                    </div>
                    <div v-if="tabs == 3" class="colorState3">漏保养</div>
                </div>
            </div>
        </div>
        <div id="add_form" class="add"><span class="iconfont icon-add-bold"></span></div>
    </div>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                startTime: '',
                endTime: '',
                isVisible1: false,
                isVisible2: false,
                tabs: 1,
                typeId: 0,
                typeName: '',
                typeShow: false,
                typeList: [
                    { id: 0, name: '全部', isCheck: true },
                    { id: 1, name: '日巡检内容', isCheck: false },
                    { id: 2, name: '月度巡检内容', isCheck: false },
                    { id: 3, name: '季度巡检内容', isCheck: false },
                    { id: 4, name: '年度巡检内容', isCheck: false },
                ],
                timeId: 0,
                timeName: '',
                timeShow: false,
                timeList: [
                    { id: 1, name: '近一个月', isCheck: true },
                    { id: 2, name: '近六个月', isCheck: false },
                    { id: 3, name: '近一年', isCheck: false },
                ],
                stateId: 0,
                stateName: '',
                stateShow: false,
                stateList: [
                    { id: 0, name: '全部', isCheck: true },
                    { id: 1, name: '正常', isCheck: false },
                    { id: 2, name: '异常', isCheck: false },
                ]
            },
            mounted() {
                console.log('qweqwe')
            },
            methods: {
                switchPicker1(param) {
                    this[`${param}`] = !this[`${param}`];
                },
                setChooseValue1(param) {
                    this.startTime = param[3];
                },
                switchPicker2(param) {
                    this[`${param}`] = !this[`${param}`];
                },
                setChooseValue2(param) {
                    this.endTime = param[3];
                },
                back() {
                    window.history.go(-1);
                },
                stateBtn(data) {
                    this.stateList.map((item, index) => {
                        if (item.id == data.id) {
                            item.isCheck = true
                        } else {
                            item.isCheck = false
                        }
                    })
                    this.stateName = data.name
                    this.stateId = data.id
                    this.stateShow = false
                },
                timeBtn(data) {
                    this.timeList.map((item, index) => {
                        if (item.id == data.id) {
                            item.isCheck = true
                        } else {
                            item.isCheck = false
                        }
                    })
                    this.timeName = data.name
                    this.timeId = data.id
                },
                typeBtn(data) {
                    this.typeList.map((item, index) => {
                        if (item.id == data.id) {
                            item.isCheck = true
                        } else {
                            item.isCheck = false
                        }
                    })
                    this.typeName = data.name
                    this.typeId = data.id
                    this.typeShow = false
                },
                gomaintainDetail(){
                    window.location.href = "./maintainDetail.html"
                }
            }
        })
    </script>
</body>

</html>